<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CPR训练设备监控</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="./style.css">
  <!-- <script src="https://cdn.jsdelivr.net/npm/web-bluetooth-polyfill@0.1.1/dist/web-bluetooth-polyfill.min.js"></script> -->
  <!-- 引入js 文件 -->
</head>

<body>
  <header>
    <h1>CPR训练设备监控平台</h1>
  </header>

  <div class="status-container">
    <div>
      <span>设备状态: </span>
      <span id="bluetoothStatus" class="status-disconnected">未连接</span>
    </div>
    <div>
      <span>模型: </span>
      <span id="modelInfo">未知</span>
    </div>
  </div>

  <div class="button-container">
    <button id="connectBtn">连接设备</button>
    <button id="clearBtn">开始训练</button>
    <button id="stopBtn">结束训练</button>
    <button id="printLog">打印日志</button>
  </div>

  <div class="overlay" id="logOverlay"></div>
  <div class="log-container" id="logContainer">
    <div class="log-header">
      <h3>系统日志</h3>
      <button class="close-btn" id="closeLog">关闭</button>
    </div>
    <div class="log-content" id="logContent"></div>
    <div style="margin-top: 15px; text-align: center;">
      <button id="copyLog"
        style="background: #3498db; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer;">复制日志</button>
    </div>
  </div>

  <div class="data-container">
    <!-- 第一排：按压数据、通气数据、按压状态 -->
    <div class="data-card">
      <h3>按压数据</h3>
      <div class="data-item">
        <span class="data-label">按压次数:</span>
        <span id="compressionCount" class="data-value">0</span>
      </div>
      <div class="data-item">
        <span class="data-label">实时深度mm:</span>
        <span id="compressionDepth" class="data-value">0 mm</span>
      </div>
      <div class="data-item">
        <span class="data-label">按压位置:</span>
        <span id="compressionPosition" class="data-value">无数据</span>
      </div>
      <div class="data-item">
        <span class="data-label">按压频率（次/分）:</span>
        <span id="compressionRate" class="data-value">0</span>
      </div>
      <div class="data-item">
        <span class="data-label">最大深度mm:</span>
        <span id="maxCompressionDepth" class="data-value">0 mm</span>
      </div>
      <div class="data-item">
        <span class="data-label">完全回弹:</span>
        <span id="isRecoil" class="data-value status-boolean">否</span>
      </div>
    </div>

    <div class="data-card">
      <h3>通气数据</h3>
      <div class="data-item">
        <span class="data-label">气道状态:</span>
        <span id="isVentilation" class="data-value status-boolean">否</span>
      </div>
      <div class="data-item">
        <span class="data-label">通气次数:</span>
        <span id="ventilationCount" class="data-value">0</span>
      </div>
      <div class="data-item">
        <span class="data-label">通气容量:</span>
        <span id="ventilationVolume" class="data-value">0 ml</span>
      </div>
      <div class="data-item">
        <span class="data-label">通气时长:</span>
        <span id="ventilationDuration" class="data-value">0 s</span>
      </div>
      <div class="data-item">
        <span class="data-label">最大通气量:</span>
        <span id="maxVentilationVolume" class="data-value">0 ml</span>
      </div>
    </div>

    <!-- 按压状态显示区域 -->
    <div class="data-card">
      <h3>按压状态显示</h3>
      <div class="compression-status">
        <img id="compressionStatusImg" src="../img/cylinder.png" alt="按压状态" class="status-image">
        <div class="status-text">
          <span id="compressionStatusText">默认状态</span>
        </div>
      </div>
    </div>
    
    <!-- 第二排：波形图区域 -->
    <!-- 按压波形图占用两个宽度 -->
    <div class="data-card waveform-card compression-waveform">
      <h3>按压深度波形图</h3>
      <div class="waveform-container">
        <canvas id="compressionWaveform" height="200"></canvas>
        <div class="waveform-info">
          <span class="waveform-label">深度范围: 0-80mm</span>
          <span class="waveform-status" id="compressionWaveStatus">等待数据...</span>
        </div>
      </div>
    </div>

    <!-- 通气波形图占用一个宽度 -->
    <div class="data-card waveform-card ventilation-waveform">
      <h3>通气潮气量柱状图</h3>
      <div class="waveform-container">
        <canvas id="ventilationWaveform" height="200"></canvas>
        <div class="waveform-info">
          <span class="waveform-label">潮气量范围: 0-800ml</span>
          <span class="waveform-status" id="ventilationWaveStatus">等待数据...</span>
        </div>
      </div>
    </div>

    <!-- 第三排：训练统计和评分 -->
    <div class="data-card training-statistics">
      <h3>训练统计</h3>
      <div class="data-item">
        <span class="data-label">按压总数：</span>
        <span id="totalPress" class="data-value">0/150</span>
      </div>
      <div class="data-item">
        <span class="data-label">按压正确：</span>
        <span id="correctPress" class="data-value">0</span>
      </div>
      <div class="data-item">
        <span class="data-label">按压过深：</span>
        <span id="overDeep" class="data-value">0</span>
      </div>
      <div class="data-item">
        <span class="data-label">按压过浅：</span>
        <span id="overShallow" class="data-value">0</span>
      </div>
      <div class="data-item">
        <span class="data-label">吹气总数：</span>
        <span id="totalVent" class="data-value">0/10</span>
      </div>
      <div class="data-item">
        <span class="data-label">吹气正确：</span>
        <span id="correctVent" class="data-value">0</span>
      </div>
      <div class="data-item">
        <span class="data-label">吹气过大：</span>
        <span id="overVent" class="data-value">0</span>
      </div>
      <div class="data-item">
        <span class="data-label">吹气过小：</span>
        <span id="underVent" class="data-value">0</span>
      </div>
    </div>
    
    <!-- 新增：CPR评分显示 -->
    <div class="data-card score-card">
      <h3>CPR评分（红十字标准）</h3>
      <div class="score-display">
        <div class="score-number">
          <span id="currentScore" class="score-value">0</span>
          <span class="score-unit">/100分</span>
        </div>
        <div class="score-grade">
          <span id="scoreGrade" class="grade-text">未开始</span>
        </div>
      </div>
      <div class="score-breakdown">
        <div class="breakdown-item">
          <span>按压次数(20分)</span>
        </div>
        <div class="breakdown-item">
          <span>按压质量(40分)</span>
        </div>
        <div class="breakdown-item">
          <span>通气次数(15分)</span>
        </div>
        <div class="breakdown-item">
          <span>通气质量(20分)</span>
        </div>
        <div class="breakdown-item">
          <span>按压通气比例(5分)</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 评分结果弹窗 -->
  <div class="score-modal" id="scoreModal">
    <div class="score-modal-content">
      <div class="score-modal-header">
        <h2 class="score-modal-title">CPR训练结果</h2>
      </div>
      
      <div class="statistics-grid">
        <!-- 第一行：评分显示和评分细则 -->
        <div class="score-summary">
          <h4>CPR评分</h4>
          <div class="score-display">
            <div class="final-score-number" id="modalFinalScore">0</div>
            <div class="final-score-unit">/100分</div>
            <div class="final-score-grade" id="modalFinalGrade">未开始</div>
          </div>
        </div>
        
        <div class="scoring-breakdown">
          <h4>评分细则</h4>
          <div class="score-items">
            <div class="score-item">
              <span class="score-category" id="depthQualityTitle">按压深度质量（5-6cm）</span>
              <span class="score-points">
                <span id="depthQualityScore">0</span>/25分
              </span>
            </div>
            <div class="score-item">
              <span class="score-category" id="rateQualityTitle">按压频率质量（100-120/分）</span>
              <span class="score-points">
                <span id="rateQualityScore">0</span>/20分
              </span>
            </div>
            <div class="score-item">
              <span class="score-category" id="positionAccuracyTitle">按压位置准确性</span>
              <span class="score-points">
                <span id="positionAccuracyScore">0</span>/15分
              </span>
            </div>
            <div class="score-item">
              <span class="score-category" id="recoilCompleteTitle">按压完全回弹</span>
              <span class="score-points">
                <span id="recoilCompleteScore">0</span>/10分
              </span>
            </div>
            <div class="score-item">
              <span class="score-category" id="ventQualityTitle">通气质量（500-600ml/1s）</span>
              <span class="score-points">
                <span id="ventQualityScore">0</span>/20分
              </span>
            </div>
            <div class="score-item">
              <span class="score-category" id="interruptionTitle">中断时间最小化（<10s）</span>
              <span class="score-points">
                <span id="interruptionScore">0</span>/10分
              </span>
            </div>
          </div>
        </div>
        
        <!-- 第二行：统计数据 -->
        <div class="statistics-row">
          <div class="stat-group">
            <h4>按压统计</h4>
            <div class="stat-items">
              <div class="stat-item">
                <span class="stat-label">总数：</span>
                <span class="stat-value" id="modalTotalPress">0/150</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">正确：</span>
                <span class="stat-value correct" id="modalCorrectPress">0</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">过深：</span>
                <span class="stat-value error" id="modalOverDeep">0</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">过浅：</span>
                <span class="stat-value error" id="modalOverShallow">0</span>
              </div>
            </div>
          </div>
          
          <div class="stat-group">
            <h4>通气统计</h4>
            <div class="stat-items">
              <div class="stat-item">
                <span class="stat-label">总数：</span>
                <span class="stat-value" id="modalTotalVent">0/10</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">正确：</span>
                <span class="stat-value correct" id="modalCorrectVent">0</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">过大：</span>
                <span class="stat-value error" id="modalOverVent">0</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">过小：</span>
                <span class="stat-value error" id="modalUnderVent">0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="modal-actions">
        <button class="modal-btn" id="restartTraining">重新开始</button>
        <button class="modal-btn secondary" id="closeModal">关闭</button>
      </div>
    </div>
  </div>

  <script src="./frame.js"></script>
  <script src="./script.js"></script>

</body>

</html>